<template>
  <div class="full-width clearfix">
    <div class="blockfix-wrap">
      <span class="blockfix">个人工作台</span>
    </div>
    <!-- 常用模块 -->
    <div class="float-block">
      <el-card
        class="block-card"
        :body-style="{height:'202px'}"
      >
        <div
          slot="header"
          class="clearfix"
        >
          <span>常用模块</span>
        </div>
        <div class="daily-modules">
          <div class="content">
            <div
              v-for="item in commonModules"
              :key="item.name"
              class="meta"
              @click="commonModuleClick(item)"
            >
              <div class="meta-icon">
                <svg-icon
                  :icon-class="getIconClass(item)"
                  class-name="icon"
                />
              </div>
              <div class="meta-title">{{item.meta.title}}</div>
            </div>
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>
<script>
import {
  getCommonModules
} from '@/api/home'
import { mapGetters } from 'vuex'
import { filterTreeNode, foreachTreeData } from '@/utils/tree'
import RollTable from './components/rollTable'
export default {
  components: { RollTable },
  data() {
    return {
      commonModules: []
    }
  },
  computed: {
    ...mapGetters(['sidebarRouters'])
  },
  created() {
    this.getCommonModules()
  },
  methods: {
    getCommonModules() {
      getCommonModules().then((res) => {
        const sidebarRouters = JSON.parse(JSON.stringify(this.sidebarRouters))
        foreachTreeData(sidebarRouters, (node, parent) => {
          node.parent = { ...parent }
        })
        const commonModules = filterTreeNode(sidebarRouters, (node) => {
          return res.data.includes(node.name)
        })
        this.commonModules = commonModules.slice(0, 6)
      })
    },
    commonModuleClick(item) {
      this.$router.push({ name: item.name })
    },
    getIconClass(item) {
      if (item.meta?.icon) {
        return item.meta.icon
      }
      if (item.parent?.meta) {
        return item.parent.meta.icon
      }
    },
  }
}
</script>
<style lang="scss" scoped>
@import "../../assets/styles/element-variables";
.daily-modules {
  border-radius: 3px;
  padding: 5px 12px;
  .content {
    overflow: hidden;
  }
  .meta {
    float: left;
    width: 50%;
    display: flex;
    margin: 10px 0;
    cursor: pointer;
  }
  .meta-icon {
    font-size: 19px;
    display: inline-block;
    vertical-align: middle;
    color: $--color-primary;
  }
  .meta-title {
    color: #666666;
    font-size: 14px;
    margin-left: 5px;
    display: inline-block;
    vertical-align: middle;
  }
}
::v-deep .row.danger .cell {
  color: #f56c6c;
  font-weight: 600;
}
.header-highlight {
  color: #f44141;
  margin-left: 6px;
}
</style>